<script setup>

</script>


<template>
    <div class="member">
        <div class="container">
            <div class="aside">
                <h4>我的账户</h4>
                <router-link class="active" to="/layout/member/user">个人中心</router-link>
                <h4>我的账户</h4>
                <router-link to="/layout/member/order">我的订单</router-link>
            </div>
            <div class="article">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .member{
        margin-top: 20px;
        .container{
            display: flex;
                .aside{
                width: 220px;
                margin-right: 20px;
                border-radius: 2px;
                background-color: #fff;
                // text-align: center;
                h4{
                    font-size: 18px;
                    font-weight: 400;
                    padding: 20px 52px 5px;
                    border-top: 1px solid #f6f6f6;
                }

                a{
                    position: relative;
                    display: inline-block;
                    height: 54px;
                    line-height: 54px;
                    color: #666;
                    // margin-right: 6px;
                    margin-left: 53px;
                    &.router-link-active::before{
                        content: "";
                        width: 6px;
                        height: 6px;
                        background: $xtxColor;
                        position: absolute;
                        border-radius: 50%;
                        left: -16px;
                        top: 23px;
                    }
                    &:hover,
                    &.router-link-active{
                        color: $xtxColor;
                    }
                }
            }
            .article{
                flex: 1;
                background: #fff;
                width: 1000px;
            }
        }
        
    }
</style>